<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>书城首页</title>
    <!--引入vue、element-ui、axios；注意：vue要在element-ui之前-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.14/index.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.js"></script>
    <script src="/js/axios.helper.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.14/theme-chalk/index.css" rel="stylesheet">
    <style>
        .el-row {
            margin-bottom: 20px;

        &
        :last-child {
            margin-bottom: 0;
        }

        }
        .el-col {
            border-radius: 4px;
        }

        .bg-purple-dark {
            background: #99a9bf;
        }

        .grid-content {
            border-radius: 4px;
            min-height: 36px;
            /* 设置水平、垂直居中 */
            display: flex;
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header>
            <!--element官网：Layout 布局，通过基础的 24 分栏，迅速简便地创建布局。-->
            <!--第一行：头部-->
            <el-row>
                <el-col :span="24">
                    <div class="grid-content bg-purple-dark">
                        <el-link :href="'/index.html'">蜗牛学苑</el-link>
                    </div>
                </el-col>
            </el-row>

            <!--登录页面-->
            <el-row>
                <el-col :span="10" :offset="8">
                    <el-form ref="form" :model="user" label-width="80px">
                        <el-form-item label="登录名称">
                            <el-input v-model="user.account" placeholder="请输入名称"></el-input>
                        </el-form-item>
                        <el-form-item label="登录密码">
                            <el-input type="password" v-model="user.password" placeholder="请输入密码"></el-input>
                        </el-form-item>

                        <el-form-item label="验证码">
                            <a href="javascript:void(0)" @click="flushValidateCode">
                                <img :src="imgsrc">
                            </a>
                            <a href="javascript:void(0)" @click="flushValidateCode">
                                看不清楚，换一张
                            </a>
                        </el-form-item>

                        <el-form-item>
                            <el-input v-model="user.validateCode" placeholder="请输入验证码"></el-input>
                        </el-form-item>

                        <el-form-item>
                            <el-button type="primary" @click="login">登录</el-button>
                            <el-link type="success" :href="'/register.html'">如无账号，请先注册</el-link>
                        </el-form-item>
                    </el-form>

                </el-col>
            </el-row>

        </el-header>
        <el-main>

        </el-main>
    </el-container>
</div>
</body>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                user: {},
                imgsrc: '/kaptcha/image'
            }
        },
        methods: {
            // 刷新验证码
            flushValidateCode() {
                // 参数作用：让每次方法后台地址都不一样，避免浏览器读取缓存
                this.imgsrc = '/kaptcha/image?d=' + new Date();
            },
            login() {
                // 发送异步请求，携带参数：账号、密码、验证码
                axios.post('/user/login', this.user).then(resp => {
                    console.log('resp', resp)
                    if (resp.data.code == 200) {
                        // 【h获取后台返回的token】
                        let token = resp.data.data;
                        // 【存储到localStorage中,本地浏览器存储；存储后在任何页面都可以获取】
                        localStorage.setItem("token",token);
                        // 登录成功
                        location.href = '/index.html'
                    } else {
                        this.$message.error("登录失败！" + resp.data.message)
                        return;
                    }
                })
            }
        }
    })
</script>
</html>